<template>
	<div>
		<Pay-Header title="结算"></Pay-Header>
		<div to="address" class="pay-address">
			<p class="address-box">
				<span class="name">收货人：{{this.$store.state.user[0].userRealName}}</span>
				<span class="phone">{{this.$store.state.user[0].phone}}</span>
			</p>
			<div style="float: right;margin-right: 5%;" @click="changeAddress">
				<i class="iconfont icon-youjiantou"></i>
			</div>
			<p class="address-details">
				收货地址：{{address}}
			</p>
		</div>
		<div class="pay-shop">
			<p style="width: 100%;font-size: 0.4rem;background-color: white;padding-left: 0.4rem;padding-top: 0.1rem;">商品清单</p>
			<div v-for="(list,index) in pay" :key="index" style="margin-top: -2%;">
				<div class="pay-shop-list" v-for="(product,index) in list">
					<p class="pay-shop-2">
						<img :src="product.goods_img">
						<p class="pay-shop-2-box">
							<span class="name">{{product.product_class_name}}
								<p>× {{product.value}}</p>
							</span>
							<!-- <span>颜色：冰钻黑</span> -->
							<span class="price">¥ {{product.price}}</span>
						</p>
					</p>
				</div>
			</div>
			
			<!-- <div class="pay-shop-invoice">
				<p class="pay-invoice-1">发票信息</p>
				<div class="pay-invoice-2">
					<div class="pay-invoice-2-2">
						<div v-show="invoiceIndex===0">
							<p>*请输入发票抬头:</p>
							<input type="text" id="input" v-model="list.text" placeholder="请输入发票信息">

						</div>
					</div>

				</div>
			</div> -->

			<div class="pay-shop-fs">
				<div class="pay-fs-1">支付方式</div>
				<div class="pay-fs-2">
					<div class="pay-fs-2-1">
						<div v-for="(list,index) in lists" :class="{active:index===listIndex}" @click="btn(list.name,index)">{{list.name}}</div>
					</div>
					<div class="pay-fs-2-2">
						<div v-show="listIndex===0" class="pay-fs-2-2-1">{{payStyleIno[listIndex].name}}</div>
						<div v-show="listIndex===1" class="pay-fs-2-2-2">{{payStyleIno[listIndex].name}}</div>
						<div v-show="listIndex===2" class="pay-fs-2-2-3">{{payStyleIno[listIndex].name}}</div>
					</div>
				</div>

			</div>
			
			
			<div class="pay-shop-liuyan">
				<p class="pay-liuyan-1">订单留言</p>
				<div class="pay-liuyan-2">
					<textarea v-model="ly" rows="5" placeholder="限300字（若有特殊需求，请联系商城在线客服)" maxlength="300" style="font-size: 15px;;"></textarea>
					<p>商品总金额：¥{{this.sum}}</p>
					<p>运费：0.00</p>
					<p>优惠：¥0.00</p>
					<p>赠送积分：{{this.sum}}</p>

				</div>
			</div>

			

			<div class="pay-shop-footer">
				<p class="price">订单总金额：<span>¥{{this.sum}}</span></p>
				<a class="order" @click="addOrder()">立即结算</a>
			</div>
		</div>
	</div>
</template>


<script>
	import {
		Toast,
		Picker
	} from "mint-ui";
	import {
		mapGetters,
		mapMutations
	} from "vuex";
	import PayHeader from "../../common/header";
	export default {
		name: "pay",
		data() {
			return {
				listIndex: 0,
				invoiceIndex: 0,
				pay: [],
				lists: [{
						id: "1",
						name: "在线支付"
					},
					{
						id: "2",
						name: "花呗分期"
					},
					{
						id: "3",
						name: "货到付款"
					}
				],
				text: "",
				ly: "",
				addressSlots: [],
				address: "",
				payStyleIno: [
					{
						name:"支持支付宝支付、微信支付、银行卡支付、财付通等"
					},
					{
						name:"花呗分期是花呗联合天猫淘宝推出的，面向互联网的赊购服务，通过支付宝轻松还款，0首付"
					},
					{
						name:"货到再付款，支持现金交易"
					}
				],
				payStyle: "在线支付",
				sum: 0
			};
		},
		components: {
			PayHeader
		},
	   /* computed: {
			sum:function(){
				
			}
		}, */
		methods: {
			btn(name, index) {
				this.payStyle = name
				this.listIndex = index;
			},
			invoiceClick(index) {
				this.invoiceIndex = index;
			},
			addOrder() {
				var _this = this;
				// console.log(list);
				/* var data = {
					goodsId: list.goods_id,
					userId: this.$store.state.user[0].userId,
					allmoney: list.price * list.value,
					orderStatus: 1,
					linkman: this.$store.state.user[0].userRealName,
					telephone: this.$store.state.user[0].phone,
					address: this.address,
					ly: this.ly
				}; */
				// console.log(_this.pay); 
				var info = "";
				for(var i = 0; i < _this.pay.length; i++){
					for(var j = 0; j < _this.pay[i].length; j++){
						_this.$http.post('/api/order/add_order_info?goodsId=' + _this.pay[i][j].goods_id 
							+ "&userId=" + _this.$store.state.user[0].userId
							+ "&allmoney=" + _this.sum + "&orderStatus=1" 
							+ "&linkman=" + _this.$store.state.user[0].userRealName 
							+ "&telephone=" + _this.$store.state.user[0].phone 
							+ "&address=" + _this.address + "&ly=" + _this.ly
							+ "&value=" + _this.pay[i][j].value + "&price=" + _this.pay[i][j].price
							+ "&payStyle=" + _this.payStyle) 
						.then(res => {
							/* if(res.body.data.info == "库存不足"){
								info += _this.pay[i][j].goods_id + "号商品库存不足";
								break;
							} */
						});
					}
				}
				var time = setInterval(function() {
					_this.$router.push({
						path: "success",
						query: {
							userId: _this.$store.state.user[0].userId
						}
					});
					clearInterval(time);
				}, 1000);
				
			},
			changeAddress() {
				this.$router.push({
					path: "address"
				});
			}
		},
		created() {
			// 	console.log(this.$route.query);
			var _this = this;
			var goodsIdList = [],userId = [];
			goodsIdList.push(_this.$route.query.goodsId);
			userId = _this.$route.query.userId;
			console.log(goodsIdList + " " + userId);
			_this.$http.get('/api/order/get_order_temporary', {
				params: {
					goodsId: goodsIdList,
					userId: userId
				}
			})
			.then(res => {
				console.log(res);
				_this.pay = res.body.data
				for(var i = 0; i < _this.pay.length; i++){
					for(var j = 0; j < _this.pay[i].length; j++){
						_this.sum += _this.pay[i][j].price * _this.pay[i][j].value
					}
				}
			});

			_this.$http.get('/api/address/show_address?userId=' + userId)
			.then(res => {
				_this.address = res.body.data[0].address
			})

		}
	};
</script>
<style lang="stylus" scoped>
	.active {
		border: 1px solid #444;
		color: red;
	}

	.pay-address {
		width: 100%;
		height: 4.3rem;
		background: url('https://shopstatic.vivo.com.cn/vivoshop/wap/dist/images/prod/bg-addr-box-line_d380baa.png') #fff left bottom repeat-x; // shopstatic.vivo.com.cn/vivoshop/wap/dist/images/prod/bg-addr-box-line_d380baa.png) #fff left bottom repeat-x;
		background-size: 1.6rem;
		padding-top: 1.45rem;
		display: block;

		.address-box {
			width: 87%;
			margin: auto;
			font-size: 0.4rem;
			padding-top: 0.3rem;
			padding-bottom: 0.3rem;

			.phone {
				margin-left: 5%
			}
		}

		.address-details {
			width: 87%;
			margin: auto;
			color: #666;
			font-size: 0.38rem;
		}
	}

	.pay-shop {
		width: 100%;
		margin-bottom: 1.5rem;

		.pay-shop-invoice {
			width: 100%;
			height: 4.3rem;
			background: #fff;
			margin-bottom: 10px;
			margin-top: 10px;

			.pay-invoice-1 {
				width: 100%;
				height: 1.5rem;
				line-height: 1.5rem;
				border-bottom: 1px solid #eaeaea;
				font-size: 0.4rem;
				padding-left: 0.7rem;
			}

			.pay-invoice-2 {
				width: 100%;
				height: 4rem;

				.pay-invoice-2-1 {
					width: 100%;
					height: 30%;

					div {
						display: block;
						width: 2.88rem;
						height: 0.9rem;
						line-height: 0.9rem;
						border: 1px solid #d1d1d1;
						border-radius: 3px;
						margin: 0.1rem 0.3rem;
						float: left;
						text-align: center;
					}
				}

				.pay-invoice-2-2 {
					width: 92%;
					height: 70%;
					margin: auto;

					font-size 0.35rem p {
						margin-top: 10px;
						margin-bottom: 10px;
					}

					input {
						width: 100%;
						height: 1.18rem;
						border: 1px solid #d1d1d1;
						border-radius: 3px;
						padding-left: 0.2rem;
					}
				}
			}
		}

		.pay-shop-list {
			width: 100%;
			height: 4.5rem;
			margin-top: 0.3rem;
			background: #fff;

			.pay-shop-1 {
				width: 100%;
				height: 1.5rem;
				line-height: 1.5rem;
				border-bottom: 1px solid #eaeaea;
				font-size: 0.4rem;
				padding-left: 0.7rem;
			}

			.pay-shop-2 {
				float: left;

				img {
					width: 2.5rem;
					margin: 0.2rem;
				}
			}

			.pay-shop-2-box {
				width: 70%;
				display: flex;
				flex-direction: column;

				.name {
					font-size: 0.4rem;
					margin-top: 0.3rem;
					height: 0.6rem;

					p {
						float: right;
						margin-right: 0.5rem;
					}
				}

				.price {
					color: red;
					font-size: 0.35rem;
					font-weight: 500;
					height: 0.6rem;
				}
			}
		}

		.pay-shop-liuyan {
			width: 100%;
			height: 6.5rem;
			background: #fff;
			margin-top: 0.3rem;
			margin-bottom: 0.3rem;

			.pay-liuyan-1 {
				width: 100%;
				height: 1.5rem;
				line-height: 1.5rem;
				border-bottom: 1px solid #eaeaea;
				font-size: 0.4rem;
				padding-left: 0.7rem;
			}

			.pay-liuyan-2 {
				width: 90%;
				margin: auto;

				textarea {
					width: 100%;
					height: 2rem;
					border: 1px solid #d1d1d1;
					border-radius: 3px;
					padding: 0.15rem 0.2rem;
					margin: 0.3rem auto;
					display: block;
				}

				p {
					color: #888;
					height: 0.48rem;
					font-size: 0.34rem;
				}
			}
		}

		.pay-shop-fs {
			width: 100%;
			height: 5rem;
			background: #ffffff;

			.pay-fs-1 {
				width: 100%;
				height: 1.5rem;
				line-height: 1.5rem;
				border-bottom: 1px solid #eaeaea;
				font-size: 0.4rem;
				padding-left: 0.7rem;
			}

			.pay-fs-2 {
				width: 100%;
				height: 3.5rem;
				background: #ffffff;

				.pay-fs-2-1 {
					width: 100%;
					height: 40%;
					font-size: 0.35rem;
					// background yellow
					display: flex;
					justify-content: center;
					align-items: center;

					div {
						display: block;
						width: 2.88rem;
						height: 0.9rem;
						line-height: 0.9rem;
						border: 1px solid #d1d1d1;
						border-radius: 3px;
						margin: 0.1rem;
						float: left;
						text-align: center;
					}
				}

				.pay-fs-2-2 {
					width: 100%;
					height: 60%;
					font-size: 0.35rem;

					// background red
					div {
						width: 90%;
						height: 1.3rem;
						border-radius: 3px;
						border: 1px solid #d1d1d1;
						margin: auto;
						padding: 0.3rem;
					}

					.pay-fs-2-2-2 {
						height: 1.56rem;
					}
				}
			}
		}
	}

	.pay-shop-footer {
		width: 100%;
		height: 1.5rem;
		border-top: 1px solid #eaeaea;
		background: white;
		position: fixed;
		bottom: 0;

		.price {
			float: left;
			line-height: 1.5rem;
			font-size: 0.43rem;
			color: #666;
			padding-left: 0.3rem;

			span {
				color: red;
			}
		}

		.order {
			width: 3.3rem;
			height: 0.9rem;
			line-height: 0.9rem;
			font-size: 0.35rem;
			margin-top: 0.3rem;
			margin-right: 0.3rem;
			border-radius: 30px;
			text-align: center;
			color: #fff;
			background: #f81200;
			float: right;
		}
	}

	a {
		text-decoration: none
	}

	a:focus,
	a:hover {
		text-decoration: none
	}
</style>
